<template>
  <basic-dialog
    width="60%"
    title="授权品类"
    :visible="visible"
    :showClose="false"
    :handleClose="handleClose"
  >
    <el-form ref="formRef" :model="formData" class="form-wrap" label-width="100px">
      <el-form-item
        v-for="item in formItems"
        :key="item.prop"
        :prop="item.prop"
        :label="`${item.label}：`"
      >
        <template v-if="item.type == 'select'">
          <el-select
            v-model="formData[item.prop]"
            placeholder="请选择"
            clearable
            :disabled="item.disabled"
            :multiple="item.multiple"
            collapse-tags
          >
            <el-option
              v-for="item in item.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
        <template v-else>
          <el-input v-model="formData[item.prop]" disabled />
        </template>
      </el-form-item>
    </el-form>
    <el-row slot="ft" type="flex" justify="center">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="okLoading" @click="handleOk">确定</el-button>
    </el-row>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import {
  EDIT_AUTH_FORM_ITEMS,
  SEQUENCE_VALUES,
} from '../constants';
import { getInitFormData } from '@/utils/getUtils';
import {
  getDepartmentAuthDetailService,
  saveDepartmentSequenceService
} from '@/api/commodity/departmentManage/departmentManage';
export default {
  components: {
    BasicDialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    departmentId: {
      type: String,
      required: true
    },
  },
  data () {
    return {
      formItems: EDIT_AUTH_FORM_ITEMS,
      formData: getInitFormData(EDIT_AUTH_FORM_ITEMS),
      okLoading: false,
    }
  },
  watch: {
    async visible (val) {
      if (!val) return
      this.formData = getInitFormData(EDIT_AUTH_FORM_ITEMS)
      await this.getAuthDetails()
      this.updateFormItems()
    }
  },
  methods: {
    // 更新表单列集合
    updateFormItems () {
      const isManagerDepartment = this.formData.departmentSequence == SEQUENCE_VALUES.Product
      this.formItems = isManagerDepartment ? EDIT_AUTH_FORM_ITEMS : EDIT_AUTH_FORM_ITEMS.slice(0, -1)
    },
    // 根据品类授权等级获取品类集合
    async getAuthDetails () {
      const data = { departmentId: this.departmentId }
      const res = await getDepartmentAuthDetailService(data, '.form-wrap')
      if (res?.retData) {
        this.formData = {
          ...res.retData,
          productDepartmentTypes: res?.retData?.productDepartmentType.split(',').filter(item => item)
        }
      }
    },
    // 确定
    async handleOk () {
      const data = {
        departmentId: this.departmentId,
        productDepartmentTypes: this.formData.productDepartmentTypes
      }
      const loadingFn = state => { this.okLoading = state }
      const res = await saveDepartmentSequenceService(data, loadingFn)
      if (res?.code == '0') {
        this.$message.success('保存成功')
        this.handleClose()
        this.$emit('updateTableData')
      }
    },
    // 关闭弹框
    handleClose () {
      this.$emit('update:visible', false);
    },
  }
}
</script>
